<template>
	<view>
		<scroll-view :scroll-y="modalName==null" class="page" :class="modalName!=null?'show':''">
			<cu-custom bgColor="bg-gradual-pink" :isBack="true">
				<block slot="backText">返回</block>
				<block slot="content">作业活动详情</block>
			</cu-custom>
			
			<uni-segmented-control :current="current" :values="segmentedControlList" @clickItem="onClickItem" styleType="button" activeColor="#00aaff"></uni-segmented-control>
			<view class="content">
				<view v-show="current === 0">
					<view class="cu-item" >
						<view class="cu-form-group">
							<view class="title">作业编号</view>
							<view class="content">{{formData.number}}</view>
						</view>
					</view>
					<view class="cu-item" >
						<view class="cu-form-group">
							<view class="title">作业内容</view>
							<view class="content">{{formData.content}}</view>
						</view>
					</view>
					<view class="cu-item" >
						<view class="cu-form-group">
							<view class="title">作业区域</view>
							<view class="content">{{formData.device_dictText}}/{{formData.cell_dictText}}</view>
						</view>
					</view>
					<view class="cu-item" >
						<view class="cu-form-group">
							<view class="title">作业开始时间</view>
							<view class="content">{{formData.planStartDate}}</view>
						</view>
					</view>
					<view class="cu-item" >
						<view class="cu-form-group">
							<view class="title">作业结束时间</view>
							<view class="content">{{formData.planEndDate}}</view>
						</view>
					</view>
					<view class="cu-item" >
						<view class="cu-form-group">
							<view class="title">作业所属部门</view>
							<view class="content">{{formData.applyCompany_dictText}}</view>
						</view>
					</view>
					<view class="cu-item" >
						<view class="cu-form-group">
							<view class="title">作业申请人</view>
							<view class="content">{{formData.applicant_dictText}}</view>
						</view>
					</view>
					<view class="cu-item" >
						<view class="cu-form-group">
							<view class="title">施工单位</view>
							<view class="content">{{formData.operationCompany}}</view>
						</view>
					</view>
					<view class="cu-item" >
						<view class="cu-form-group">
							<view class="title">作业所属单位负责人</view>
							<view class="content">{{formData.operationChargePerson}}</view>
						</view>
					</view>
					<view class="cu-item" >
						<view class="cu-form-group">
							<view class="title">施工单位负责人</view>
							<view class="content">{{formData.constructionMan}}</view>
						</view>
					</view>
					<view class="cu-item" >
						<view class="cu-form-group">
							<view class="title">作业地点</view>
							<view class="content">{{formData.locations}}</view>
						</view>
					</view>
					<view class="cu-item" >
						<view class="cu-form-group">
							<view class="title">公司监护人</view>
							<view class="content">{{formData.companyGuardian}}</view>
						</view>
					</view>
					<view class="cu-item" >
						<view class="cu-form-group">
							<view class="title">施工单位监护人</view>
							<view class="content">{{formData.constructionGuardian}}</view>
						</view>
					</view>
					<view class="cu-item" >
						<view class="cu-form-group">
							<view class="title">危害辨识</view>
							<view class="content">{{formData.riskIdentificationResult_dictText}}</view>
						</view>
					</view>
					<view class="cu-item" >
						<view class="cu-form-group">
							<view class="title">作业原因</view>
							<view class="content">{{formData.jobReason_dictText}}</view>
						</view>
					</view>
				</view>
				<view v-show="current === 1">
					<uni-group title="施工单位" margin-top="20">
						<view v-for="(JSAitem,index) in jobTicketJsaAnalyzeList" :key="index"> 
							<view class="cu-form-group" v-if="JSAitem.confirmPost=='施工单位'">
								<view class="title">危害因素</view>
								<view class="content">{{JSAitem.hazardFactorName}}</view>
							</view>
							<view class="cu-form-group" v-if="JSAitem.confirmPost=='施工单位'">
								<view class="title">控制措施</view>
								<view class="content">{{JSAitem.controlMeasureName}}</view>
							</view>
							<view class="cu-form-group" v-if="JSAitem.confirmPost=='施工单位'">
								<view class="title">确认岗位</view>
								<view class="content">{{JSAitem.confirmPost}}</view>
							</view>
						</view>
					</uni-group>
					<uni-group title="设备" margin-top="20">
						<view v-for="(JSAitem,index) in jobTicketJsaAnalyzeList" :key="index">
							<view class="cu-form-group" v-if="JSAitem.confirmPost=='设备'">
								<view class="title">危害因素</view>
								<view class="content">{{JSAitem.hazardFactorName}}</view>
							</view>
							<view class="cu-form-group" v-if="JSAitem.confirmPost=='设备'">
								<view class="title">控制措施</view>
								<view class="content">{{JSAitem.controlMeasureName}}</view>
							</view>
							<view class="cu-form-group" v-if="JSAitem.confirmPost=='设备'">
								<view class="title">确认岗位</view>
								<view class="content">{{JSAitem.confirmPost}}</view>
							</view>
						</view>
					</uni-group>
					<uni-group title="监护人" margin-top="20">
						<view v-for="(JSAitem,index) in jobTicketJsaAnalyzeList" :key="index">
							<view class="cu-form-group" v-if="JSAitem.confirmPost=='监护人'">
								<view class="title">危害因素</view>
								<view class="content">{{JSAitem.hazardFactorName}}</view>
							</view>
							<view class="cu-form-group" v-if="JSAitem.confirmPost=='监护人'">
								<view class="title">控制措施</view>
								<view class="content">{{JSAitem.controlMeasureName}}</view>
							</view>
							<view class="cu-form-group" v-if="JSAitem.confirmPost=='监护人'">
								<view class="title">确认岗位</view>
								<view class="content">{{JSAitem.confirmPost}}</view>
							</view>
						</view>
					</uni-group>
					<uni-group title="工艺" margin-top="20">
						<view v-for="(JSAitem,index) in jobTicketJsaAnalyzeList" :key="index">
							<view class="cu-form-group" v-if="JSAitem.confirmPost=='工艺'">
								<view class="title">危害因素</view>
								<view class="content">{{JSAitem.hazardFactorName}}</view>
							</view>
							<view class="cu-form-group" v-if="JSAitem.confirmPost=='工艺'">
								<view class="title">控制措施</view>
								<view class="content">{{JSAitem.controlMeasureName}}</view>
							</view>
							<view class="cu-form-group" v-if="JSAitem.confirmPost=='工艺'">
								<view class="title">确认岗位</view>
								<view class="content">{{JSAitem.confirmPost}}</view>
							</view>
						</view>
					</uni-group>
					<uni-group title="其他" margin-top="20">
						<view v-for="(JSAitem,index) in jobTicketJsaAnalyzeList" :key="index">
							<view class="cu-form-group" v-if="JSAitem.confirmPost=='其他'">
								<view class="title">危害因素</view>
								<view class="content">{{JSAitem.hazardFactorName}}</view>
							</view>
							<view class="cu-form-group" v-if="JSAitem.confirmPost=='其他'">
								<view class="title">控制措施</view>
								<view class="content">{{JSAitem.controlMeasureName}}</view>
							</view>
							<view class="cu-form-group" v-if="JSAitem.confirmPost=='其他'">
								<view class="title">确认岗位</view>
								<view class="content">{{JSAitem.confirmPost}}</view>
							</view>
						</view>
					</uni-group>
					
					<view class="cu-form-group">
						<button class="mini-btn" type="primary" size="mini">签字</button>
						<button class="mini-btn" type="default" size="mini">签字查看</button>
						<button class="mini-btn" type="warn" size="mini">告知</button>
					</view>
				</view>
				<view v-show="current === 2">
					<view class="cu-item" >
						<uni-table ref="table" border stripe type="selection" emptyText="暂无更多数据" @selection-change="selectionChange">
							<uni-tr>
								<uni-th width="120" align="center">安全措施</uni-th>
								<uni-th width="60" align="center">确认岗位</uni-th>
								<uni-th width="60" align="center">确认人</uni-th>
							</uni-tr>
							<uni-tr v-for="(measureItem, index) in jobTicketMeasureRecordList" :key="index">
								<uni-td>{{ measureItem.measure }}</uni-td>
								<uni-td>{{ measureItem.verifyPost }}</uni-td>
								<uni-td>
									<image class="uniTdImgStyle" :src="getAvatar(measureItem.img)" v-if="measureItem.img !=null"></image>
								</uni-td>
							</uni-tr>
						</uni-table>
					</view>
					
					<view class="cu-form-group">
						<button class="mini-btn" type="primary" size="mini">选择签字</button>
						<button class="mini-btn" type="warn" size="mini">清除签字</button>
					</view>
				</view>
				<view v-show="current === 3">
					<view class="cu-item" >
						<uni-section title="" v-for="(securityDisclosureRecord,index) in jobTicketSecurityDisclosureRecordList" :key="index">
							<uni-card padding="0" spacing="0">
								<view class="cu-item" >
									<view class="cu-form-group">
										<view class="title">交底时间</view>
										<input name="input" v-model="securityDisclosureRecord.securityDisclosureTime" disabled></input>
									</view>
									<view class="cu-form-group">
										<view class="title">交底人签名</view>
										<image class="uniTdImgStyle" :src="securityDisclosureRecord.confessorImg" v-if="securityDisclosureRecord.confessorImg !=null"></image>
									</view>
								</view>
								<button class="mini-btn" type="primary" size="mini" @click="chickDisclosureDetails(securityDisclosureRecord)">查看交底明细</button>
							</uni-card>
						</uni-section>
					</view>
				</view>
				<view v-show="current === 4">
					<view class="sign-img-item" v-for="(ExamineRecord,index) in jobTicketExamineRecordList" :key="index">
						<view class="sign-img-title">{{ExamineRecord.auditorRole}}:</view>
						<image class="sign-image" :src="ExamineRecord.auditorImg" alt="Base64 Image">
						<view>
							<span class="span-botton-idea">{{ExamineRecord.idea}}</span>
							<span class="sign-botton-time">{{ExamineRecord.updateTime}}</span>
						</view>
					</view>
				</view>
				<view v-show="current === 5">
					<view class="cu-item" >
						<uni-section title="过程环节进度节点" type="line" padding>
							<uni-steps :options="jobTicketCourseRecordList" active-color="#007AFF" :active="active" direction="column" />
						</uni-section>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import api from '@/api/api.js'
	export default {
		name: "jobTicketDetails",
		data() {
			return {
				modalName: null,
				current: 0,
				active: 1,
				segmentedControlList: ['基本信息', 'JSA分析', '措施落实', '安全交底','票证签发','过程控制'],
				formData: {},
				jobTicketJsaAnalyzeList: [],
				jobTicketMeasureRecordList: [],
				jobTicketSecurityDisclosureRecordList: [],
				jobTicketExamineRecordList: [],
				jobTicketCourseRecordList: [],
			};
		},
		onLoad() {
			//console.log("-----query-------"+JSON.stringify(this.$Route.query))
			this.formData = this.$Route.query;
		},
		mounted() {
			/* JSA分析 */
			this.initJSAAnalysisData();
			/* 管控措施分析 */
			this.initMeasureRecordList();
			/* 安全交底 */
			this.initSecurityDisclosureRecordList();
			/* 票证签发 */
			this.initJobTicketExamineRecordList();
			/* 过程信息 */
			this.initJobTicketCourseRecordList();
		},
		methods: {
			initJSAAnalysisData(){
				api.queryJSAAnalysisList({jobTicketId: this.formData.id,pageNo:1,pageSize:1000}).then(response =>{
					if(response.data.success){
						this.jobTicketJsaAnalyzeList = response.data.result.records
					}
				})
			},
			initMeasureRecordList(){
				api.queryMeasureRecordList({jobTicketId: this.formData.id,pageNo:1,pageSize:1000}).then(response =>{
					if(response.data.success){
						this.jobTicketMeasureRecordList = response.data.result.records
					}
				})
			},
			initSecurityDisclosureRecordList(){
				api.querySecurityDisclosureRecordList({jobTicketId: this.formData.id,pageNo:1,pageSize:1000}).then(response =>{
					if(response.data.success){
						this.jobTicketSecurityDisclosureRecordList = response.data.result.records
					}
				})
			},
			initJobTicketExamineRecordList(){
				api.queryJobTicketExamineRecordList({jobTicketId: this.formData.id,pageNo:1,pageSize:1000}).then(response =>{
					if(response.data.success){
						this.jobTicketExamineRecordList = response.data.result.records
					}
				})
			},
			initJobTicketCourseRecordList(){
				api.queryJobTicketCourseRecordList({jobTicketId: this.formData.id,pageNo:1,pageSize:1000}).then(response =>{
					if(response.data.success){
						response.data.result.records.forEach(item =>{
							this.jobTicketCourseRecordList.push({
								title: item.status_dictText + "(" +item.register_dictText + ")",
								desc: item.registerTime,
							})
						})
						this.active = this.jobTicketCourseRecordList.length -1;
						console.log("======this.active======="+this.active)
					}
				})
			},
			chickDisclosureDetails(record){
				this.$Router.push({
					name: 'jobTicketSecurityDisclosureDetail',
					params:{jobTicket: this.formData,
							securityDisclosureDetail: record},
				})
			},
			onClickItem(e) {
			  if (this.current != e.currentIndex) {
				this.current = e.currentIndex;
			  }
			},
			getAvatar(signaturePath) {
				return api.getFileAccessHttpUrl(signaturePath);
			},
		}
	}
</script>

<style lang="scss">
	.page {
		height: 100Vh;
		width: 100vw;
	}

	.page.show {
		overflow: hidden;
	}

	.switch-sex::after {
		content: "\e716";
	}

	.switch-sex::before {
		content: "\e7a9";
	}

	.switch-music::after {
		content: "\e66a";
	}

	.switch-music::before {
		content: "\e6db";
	}
	.card-actions {
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		align-items: center;
		height: 45px;
		border-top: 1px #eee solid;
	}
	.card-actions-item {
		display: flex;
		flex-direction: row;
		align-items: center;
	}
	.card-actions-item-text {
		font-size: 12px;
		color: #666;
		margin-left: 5px;
	}
	.button-sp-area {
		align-items: center;
	}
	.uniTdImgStyle {
		width: 8vw;
		height: 6Vh;
	}
	.sign-img-item{
		margin: 5px;
		border-style: solid;
		border-color: black;
	}
	.sign-img-empty{
		border-color: black;
	}
	.span-botton-idea{
		float: light;
	}
	.sign-botton-time{
		float: right;
	}
	
</style>
